<template>
  <div class="home-container">
    <van-nav-bar title="贵物头条" :fixed="true"/>

<!--  导入，注册，使用ArticleInfo组件  -->
<!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
<!-- cmtCount 建议写成 cmt-count -->
<!--  下拉刷新  -->
    <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
<!--   上拉加载   -->
    <van-list :loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <ArticleInfo
      v-for="item in artList"
      :key="item.id"
      :title="item.title"
      :author="item.aut_name"
      :cmt-count="item.comm_count"
      :time="item.pubdate"
      :cover="item.cover"
    ></ArticleInfo>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 按需导入API接口
import { getArticleListApi } from '@/api/articleAPI'
// 导入组件
import ArticleInfo from '@/components/Article/ArticleInfo'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',

  data () {
    return {
      page: 1,
      limit: 10,

      // 文章的数组
      artList: [],
      // 是否正在加载下一页数据
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据，就要把finished改成true
      finished: false,
      // 是否正在下拉刷新
      refreshing: false
    }
  },

  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList (refresh) {
      const { data: res } = await getArticleListApi(this.page, this.limit)
      if (refresh) {
        // 如果为真，代表是下拉刷新，新数据在前，旧数据在后
        this.artList = [...res, ...this.artList]
        this.refreshing = false
      } else {
        // 代表下拉加载，this.artList = [旧数据，新数据] 要让旧的数据在前面，新的数据在后面，不要把旧数据覆盖掉
        this.artList = [...this.artList, ...res]
        this.loading = false
      }
      if (res.length === 0) {
        // 证明没有下一页数据了，把finished变成true
        this.finished = true
      }
    },
    // 上拉加载处理函数，如果onLoad被调用，就请求下一页数据
    onLoad () {
      console.log('触发上拉加载')
      // 让页码值加1
      this.page++
      // 重新请求数据接口
      this.initArticleList()
    },
    // 下拉刷新处理函数
    onRefresh () {
      console.log('触发下拉刷新')
      // 让页码值加1
      this.page++
      // 重新请求数据接口
      this.initArticleList(true)
    }
  },

  components: {
    ArticleInfo
  },

  created () {
    this.initArticleList()
  }

}
</script>

<style scoped lang="less">
.home-container{
  padding: 46px 0 50px 0;
  .van-nav-bar{
    background-color: orange;
  }
  //当直接覆盖第三方组件样式的时候不管用，就使用 /deep/ 来覆盖第三方组件的样式
  /deep/ .van-nav-bar__title{
    color: #ffffff;
  }
}
</style>
